<%@ page import="njust.edu.entity.Dish" %>
<%@ page import="njust.edu.web.Page" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: 陈
  Date: 2021/9/18
  Time: 9:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>管理菜单信息</title>
    <style>
        a:link {text-decoration:none;}
        a:visited {text-decoration:none;}
        a:hover {text-decoration:none;}
        a:active {text-decoration:none;}
        p{
            font-family:georgia;
            font-weight: 400;
        }

        .header {
            font-size: 94%;
            opacity: 0.8;
            position: absolute;
            top: 0;
            width: 100%;
            height: 80px;
        }
        .header ul {
            list-style-type: none;
            background-color: #333;
            margin: 0;
            padding: 0;
            overflow: hidden;
            width: 100%;
            height: 80px;
        }

        .header li {
            float: left;
            height: 80px;
            width: 200px;
            font-size: 150%;
        }

        .header li a {
            display: block;
            color: white;
            text-align: center;
            padding: 30px;
            text-decoration: none;
            height: 80px;
        }
        .header li a:hover:not(.active) {
            background-color: #111;
        }
        .trade_choice {
            top: 0;
            width: 100%;
            height: 80px;
        }
        .trade_choice ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            width: 100%;
            height: 80px;
        }

        .trade_choice li {
            float: left;
            height: 80px;
            width: 200px;
            font-size: 140%;
        }

        .trade_choice li a {
            display: block;
            color: black;
            text-align: center;
            padding: 25px;
            text-decoration: none;
            height: 80px;
            border-style: solid;
            border-width: 5px;
            border-color: darkgrey;
        }
        .trade_choice li a:hover:not(.active) {
            background-color: lightgrey;
        }
        .container{
            position:absolute;
            width:1600px;
            height:1100px;
            top:80px;
            align-self: center;
            background-color: #dddce4;
            opacity: 0.8;
            border-radius: 45px/150px;
            left: 400px;
        }

        .search_tip{

            float: left;
            font-size: 100%;
            float: left;
            width: 180px;
            height: 80px;
            left: 0px;
            /*background-color: lightblue;*/
        }
        .search_dish{
            margin-top: 5px;
            float: left;
            position: relative;
            width: 150px;
            height: 70px;
            color: white;
            background-color: dodgerblue;
            border-radius: 25px;
            display: block;
            text-align: center;
            font-size: 180%;
            border-style: none;
        }
        .search_text{
            float: left;
            width: 300px;
            height: 80px;
            left: 0px;
            /*background-color: lightgreen;*/
            padding-top: 15px;
            float: left;
        }
        .edit_tip{
            width: 340px;
            font-size: 180%;
            padding-top: 20px;
            float: left;
        }
        .catalogue{
            position:relative;
            width:1500px;
            height:80px;
            left:50px;
            align-self: center;
            padding-left: 8px;
            /*background-color: white;*/
        }
        input[type=text] {
            width: 160px;
            box-sizing: border-box;
            border: 2px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            background-color: white;
            background-image: url('https://static.runoob.com/images/mix/searchicon.png');
            background-position: 10px 10px;
            background-repeat: no-repeat;
            padding: 12px 20px 12px 40px;
            -webkit-transition: width 0.4s ease-in-out;
            transition: width 0.4s ease-in-out;
        }

        input[type=text]:focus {
            width:90%;
        }
        a:link {text-decoration:none;}
        a:visited {text-decoration:none;}
        a:hover {text-decoration:none;}
        a:active {text-decoration:none;}
        .operate_dish{
            float: left;
            position: relative;
            width: 1000px;
            height: 80px;
            /*background-color: lightblue;*/
        }
        .edit_dish{
            float: left;
            width: 150px;
            position: relative;
            height: 70px;
            display: block;
            background-color: wheat;
            font-size: 180%;
            margin-left: 50px;
            text-align: center;
            border-radius: 20px;
            padding-top: 20px;
            margin-top: 5px;
        }
        .cart_cata{
            position: relative;
            float: left;
            height: 50px;
            top: 10px;
            background-color: white;
            margin-left: 20px;
            margin-right: 20px;
            padding-top: 15px;
            font-size: 150%;
            text-align: center;
        }
        .cart_list{
            position:relative;
            width:1500px;
            height:840px;
            left:50px;
            align-self: center;
            overflow: auto;
            background-color: white;
        }
        .cart_item{
            position:relative;
            width:1450px;
            height:60px;
            left:0px;
            align-self: center;
            overflow: auto;
            float: left;
            background-color: lightblue;
            margin-top: 20px;
            font-size: 140%;
            border-radius: 40px;
        }
        .cart_info{
            position: relative;
            float: left;
            height: 50px;
            background-color: white;
            margin-left: 20px;
            margin-right: 20px;
            padding-top:10px;
            font-size: 120%;
            text-align: center;
        }
        .cart_pagination{
            position:relative;
            width:1500px;
            height:120px;
            left:50px;
            align-self: center;
            overflow: auto;
            /*background-color: white;*/
            font-size: 180%;
            padding-top: 10px;
            padding-left: 550px;
        }
        .page-link{
            border-style: none;
            outline: none;
        }
        select option{
            font-size: 110%;
        }
        .dish_list{
            margin-top: 30px;
            position:relative;
            width:1500px;
            height:840px;
            left:50px;
            align-self: center;
            overflow: auto;
            /*background-color: white;*/
        }
        .dish_item{
            position:relative;
            width:1350px;
            height:80px;
            left:0px;
            margin-left: 20px;
            align-self: center;
            overflow: auto;
            float: left;
            /*background-color: white;*/
            border-top-style: solid;
            border-left-style: none;
            border-bottom-style: none;
            border-right-style: none;
            border-width: 0.5px;
            font-size: 160%;
        }
        .dish_info{
            position: relative;
            float: left;
            height: 70px;
            /*background-color: white;*/
            margin-left: 20px;
            margin-right: 20px;
            padding-top:20px;
            font-size: 120%;
            text-align: center;
        }
        .check_box{
            float: left;
            width: 40px;
            padding-top: 25px;
            height: 75px;
        }
        .choose_dish{
            width:25px;
            height:25px;
            display: none;
        }
        .edit_choice{
            width: 100px;
            padding-top:25px;
            float: left;
            height: 75px;
            display: block;
            text-align: center;
        }.edit_button{

         }

        #add_dish{
            color: white;
            background-color: dodgerblue;
        }
    </style>
    <script>
        $(document).ready(function(){
            $("#delete_dish").click(function(){
                $("#cancal_delete").show();
                $("#confirm_delete").show();
                $("#delete_dish").hide();
                $(".choose_dish").show();
            });
            $("#confirm_delete").click(function(){
                $("#delete_dish").show();
                $("#cancal_delete").hide();
                $("#confirm_delete").hide();
                $(".choose_dish").hide();
            });
            $("#cancal_delete").click(function(){
                $("#delete_dish").show();
                $("#cancal_delete").hide();
                $("#confirm_delete").hide();
                $(".choose_dish").hide();
            });
        });
    </script>

</head>
<body>
<div class = "backGround" style="position: relative;">
    <img src = "../img/item_manage.jpg" width="2402px" height="1202px">
    <div class="header">
        <ul>
            <li><a href="BookController?method=itemManageUI"><p>管理菜品</p></a></li>
            <li><a href="TradeController?method=toTradeManageUI"><p>查看订单</p></a></li>
            <li><a href="UserController?method=toFinanceUI"><p>查看营业额</p></a></li>
            <li><a href="UserController?method=toSalaryUI" ><p>查看业绩</p></a></li>
            <li style="float: right"><a href="index.jsp" ><p>退出登录</p></a></li>
        </ul>
    </div>
    <div class = "container">
        <div class = "catalogue">
            <form action="BookController?method=itemManageUI" method="post">
                <div class = "search_text">
                    <input type="text" name="search" placeholder="搜索..">
                </div>
                <div class = "search_tip">
                    <input type="submit" value="查询菜品" class = "search_dish" style=" font-weight: 700;">
                </div>
            </form>

            <div class = "operate_dish">
                <a href="BookController?method=itemAddUI" class = "edit_dish" id = "add_dish" ><p style="font-weight: 900;">添加菜品</p></a>
            </div>
        </div>
        <div class= "dish_list" >
            <%
                Page<Dish> page_list = (Page<Dish>)request.getAttribute("page");
                List<Dish> dish_list = page_list.getList();
                int count = 0;
                for(Dish dish:dish_list){
                    count++;
                    if(count==1){
            %>
                    <div class = "dish_item" style="border-top-style: none;">
                        <div class = "check_box">
                            <input type="checkbox" class = "choose_dish" style="float: left;">
                        </div>
                        <div class = "dish_info" id = "dish_id" style="width: 50px;"><p><%=dish.getId()%></p></div>
                        <div class = "dish_info" id = "table_id" style="width: 250px;"><p><%=dish.getName()%></p></div>
                        <div class = "dish_info" id = "table_type" style="width: 200px;"><p><%=dish.getDishType().getName()%></p></div>
                        <div class = "dish_info" id = "dish_stock" style="width: 100px;"><p><%=dish.getStock()%></p></div>
                        <div class = "dish_info" id = "dish_price" style="width: 260px;"><p><%=dish.getPrice()%></p></div>
                        <div class = "edit_choice" >
                            <a href="BookController?method=itemEditUI&id=<%=dish.getId()%>&pageNum=<%=page_list.getPageNo()%>"
                               class = "edit_button"><p style="font-weight: 700;">编辑</p></a>
                        </div>
                        <div class = "edit_choice" >
                            <a href="BookController?method=itemDelete&id=<%=dish.getId()%>&pageNum=<%=page_list.getPageNo()%>"
                               class = "edit_button" onclick='return confirmAct()'><p style="font-weight: 700;">删除</p></a>
                        </div>
                    </div>
            <%      }
                    else {

            %>
                    <div class = "dish_item" >
                        <div class = "check_box">
                            <input type="checkbox" class = "choose_dish" style="float: left;">
                        </div>
                        <div class = "dish_info" id = "dish_id" style="width: 50px;"><p><%=dish.getId()%></p></div>
                        <div class = "dish_info" id = "table_id" style="width: 250px;"><p><%=dish.getName()%></p></div>
                        <div class = "dish_info" id = "table_type" style="width: 200px;"><p><%=dish.getDishType().getName()%></p></div>
                        <div class = "dish_info" id = "dish_stock" style="width: 100px;"><p><%=dish.getStock()%></p></div>
                        <div class = "dish_info" id = "dish_price" style="width: 260px;"><p><%=dish.getPrice()%></p></div>
                        <div class = "edit_choice" >
                            <a href="BookController?method=itemEditUI&id=<%=dish.getId()%>&pageNum=<%=page_list.getPageNo()%>"
                               class = "edit_button"><p style="font-weight: 700;">编辑</p></a>
                        </div>
                        <div class = "edit_choice" >
                            <a href="BookController?method=itemDelete&id=<%=dish.getId()%>&pageNum=<%=page_list.getPageNo()%>"
                               class = "edit_button" onclick='return confirmAct()'><p style="font-weight: 700;">删除</p></a>
                        </div>
                    </div>
            <script type="text/javascript">
                function confirmAct()
                {
                    if(confirm('确定要删除吗?'))
                    {
                        return true;
                    }
                    return false;
                }
            </script>
            <%
                    }
                }
            %>
        </div>
        <div class = "cart_pagination">
            <ul class="pagination" style="border-style: none; outline: none; border-radius: 20px;background-color: #dddce4">
                <li class="page-item"><a class="page-link" style="border-style: none; outline: none;background-color: #dddce4"
                    href="BookController?method=itemManageUI&pageNum=<%=(page_list.getPageNo()>1)?(page_list.getPageNo()-1):page_list.getPageNo()%>"><p>Previous</p></a></li>

                <li class="page-item"><a class="page-link" style="border-style: none; outline: none;background-color: #dddce4"><p>第 <%=page_list.getPageNo()%> 页 /</p></a></li>

                <li class="page-item"><a class="page-link" style="border-style: none; outline: none;background-color: #dddce4"><p>共 <%=page_list.getTotalPageNumber()%> 页</p></a></li>

                <li class="page-item"><a class="page-link" style="border-style: none; outline: none;background-color: #dddce4"
                    href="BookController?method=itemManageUI&pageNum=<%=(page_list.getPageNo()<page_list.getTotalPageNumber())?(page_list.getPageNo()+1):page_list.getPageNo()%>"><p>Next</p></a></li>

            </ul>
        </div>
    </div>
</div>
</body>

</html>
